<nz-card>
  <div class="mb-md">
    <label> 角色编号:
      <input nz-input [(ngModel)]="this.params.roleCode" name="username" style="width: 150px;"
             class="mr-sm"/>
    </label>
    <label> 角色名:
      <input nz-input [(ngModel)]="this.params.roleName" name="username" style="width: 150px;"
             class="mr-sm"/>
    </label>

    <button nz-button (click)="this.loadRoleList()" [nzType]="'primary'">搜索</button>
    <button nz-button (click)="this.params = {}; this.loadRoleList()">重置</button>
  </div>

  <nz-divider [nzDashed]=true  style="margin: 0;padding: 0"></nz-divider>

  <div style="padding: 10px;">
    <button nz-button (click)="openEdit()" [nzType]="'primary'">新增</button>
    <button nz-button nz-popconfirm
            nzPopconfirmTitle="确认删除选中吗?"
            nzPopconfirmPlacement="right"
            (nzOnConfirm)="delete()"
            (nzOnCancel)="cancel()">删除
    </button>
  </div>

  <nz-table #basicTable  [nzData]="roles" [nzLoading]="loading" nzBordered nzSize="small">
    <thead>
    <tr>
      <th [nzChecked]="checked" (nzCheckedChange)="onAllChecked($event)"></th>
      <th>角色编号</th>
      <th>角色名称</th>
      <th>状态</th>
      <th>操作区</th>
    </tr>
    </thead>
    <tbody>
    <tr *ngFor="let data of basicTable.data">
      <td
        [nzChecked]="setOfCheckedId.has(data.id)"
      ></td>
      <td>{{data.roleCode}}</td>
      <td>{{data.roleName}}</td>
      <td>
        <nz-tag nzColor="{{data.status === 1 ? 'success' : 'error'}}">{{data.status === 1 ? '启用' : '禁用'}}</nz-tag>
      </td>
      <td>
        <a nz-button nzType="link" (click)="openEdit(data)"><i nz-icon nzType="edit"></i>编辑</a>
        <a nz-popconfirm nzPopconfirmTitle="Are you sure?" [nzPopconfirmShowArrow]="false" (nzOnConfirm)="delete(data.id)" > <i nz-icon nzType="delete"></i> 删除</a>
      </td>
    </tr>
    </tbody>
  </nz-table>
</nz-card>

<role-list-edit #roleEditComponent (voted)="onSmt()"></role-list-edit>



